<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>

<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/plugin/jquery-jtemplates.js" type="text/javascript"></script>
<script src="js/plugin/jquery-ui-1.8.12.custom.min.js"
	type="text/javascript"></script>
<script src="js/plugin/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="js/plugin/jquery.validate.min.js" type="text/javascript"></script>
<link href="css/jquery/jquery.ui.all.css" rel="stylesheet"></link>
<link href="css/jquery/jquery.alerts.css" rel="stylesheet"></link>
<link href="css/jquery/jquery.ui.dialog.css" rel="stylesheet"></link>
<link href="css/hnl-main.css" rel="stylesheet"></link>

<script>
	$(document).ready(function() {
		$("#loginForm").validate();
		$("#loginForm").addClass("ui-widget");
	});
</script>

</head>
<body>
	<form id="loginForm" method="POST"
		action="${pageContext.request.contextPath}/UserLogin.do">
		<div class="loginDiv">
			<img alt="HNL Logo" src="./images/hnl-logo.jpg" />
			<fieldset class="loginFieldSet ">
				<legend class="mainLegend">&nbsp;Please Login Below&nbsp;</legend>
				<table class="dialogReferral">
					<tr>
						<td class="firstCol"><label for="email">Username</label> <em>*</em>
						</td>
						<td class="secondCol"><input id="username" name="username"
							size="30" class="required email" /> <label for="username"
							generated="true" class="error"></label></td>
					</tr>
					<tr>
						<td><label for="password">Password</label> <em>*</em>
						</td>
						<td><input id="password" name="password" class="required"
							type="password" size="30" /> <label for="password"
							generated="true" class="error"></label></td>
					</tr>
					<tr>
						<td><input class="button_login" type="submit" value="Login" />
						</td>
					</tr>
				</table>

				<c:choose>
					<c:when test="${!empty error}">
						<div id="alert_dialog" class="ui-state-error ui-corner-all">
					</c:when>
					<c:otherwise>
						<div id="alert_dialog" class="ui-state-error ui-corner-all"
							style="display: none">
					</c:otherwise>
				</c:choose>
				<span class="ui-icon ui-icon-alert"
					style="float: left; margin-right: .3em;"></span>
				<c:out value="${error}" />
		</div>
		</fieldset>
		</div>
	</form>
</body>
</html>
